<template>
  <div>
<!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

<!-- 卡片 -->
    <el-card>
        <!-- 添加商品分类按钮行 -->
        <el-row>
            <el-button type="primary" @click="addcate">添加分类</el-button>
        </el-row>

        <!-- 表格区域 使用第三方插件-->
        <tree-table
         :data='catelist'
         :columns='columns'
         :selection-type='false' 
         :expand-type='false'
         show-index
         index-text='#'
         border
         :show-row-hover='false'>

         <!-- 是否有效模板 -->
            <template slot='isok' slot-scope="scope">
                <i v-if='!scope.row.cat_deleted' class="el-icon-success"></i>
                <i v-else class="el-icon-error"></i>
            </template>

         <!-- 排序模板 -->
            <template slot='order' slot-scope="scope">
                <el-tag size="mini" v-if='scope.row.cat_level===0'>一级</el-tag>
                <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
                <el-tag size="mini" type="warning" v-else>三级</el-tag>
            </template>

         <!-- 操作模板 -->
            <template slot='opt' slot-scope="scope">
                <el-button @click="setcateinfo(scope.row)" size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button @click="deletecateinfo(scope.row)" size="mini" type="danger" icon="el-icon-delete">删除</el-button>
            </template>
        </tree-table>

        <!-- 分页区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.pagenum"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="queryinfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog
        title="添加类型"
        :visible.sync="addcatedialogVisible"
        width="50%"
        @close='addcateclose'>
        <!-- 表单主体区域 -->
        <el-form :model="addcateinfo" :rules="addcateinforules" ref="addcateinforef" label-width="80px">
            <el-form-item label="分类名称" hide-required-asterisk prop="cat_name">
                <el-input v-model="addcateinfo.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <!-- options用来指定数据源 -->
                <!-- props用来指定配置对象 -->
                <el-cascader
                    v-model="selectkeys"
                    :options="parentlist"
                    @change="parenthandleChange"
                    :props="{expandTrigger:'hover',value:'cat_id',label:'cat_name',children:'children',checkStrictly:true}"
                    clearable
                   >
                </el-cascader>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addcatedialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addcates">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog
        title="编辑类型"
        :visible.sync="setcatedialogVisible"
        width="50%"
        @close='setcateclose'>

        <!-- 表单主体区域 --> 
        <el-form :model="setforminfo" :rules="setcateinforules" ref="setcateinforef" label-width="80px">
            <el-form-item label="分类名称" hide-required-asterisk prop="cat_name">
                <el-input v-model="setforminfo.cat_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="setcatedialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="setcates">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'cate',
  data(){
      return{
        //   查询条件（参数
          queryinfo:{
              type:3,//默认获取所有商品类型
              pagenum:1,//默认显示第一页
              pagesize:5,//默认每页显示5条
          },
        //   商品分类的数据列表，默认为空
        catelist:[],
        // 总数据条数
        total:0,
        // 为table指定列的定义
        columns:[
            {
                label:'分类名称',
                prop:'cat_name'
            },{
                label:'是否有效',
                // 表示当前列定义为模板列
                type:'template',
                // 表示当前这一列使用的模板名称
                template:'isok'
            },{
                label:'排序',
                type:'template',
                template:'order'
            },{
                label:'操作',
                type:'template',
                template:'opt'
            }
        ],
        // 添加类型弹出框显示隐藏
        addcatedialogVisible:false,
        // 添加分类的表单数据对象
        addcateinfo:{
            // 将要添加分类的名称
            'cat_name':'',
            // 父及分类的id,如果为0,代表自己就是最高级父级
            cat_pid:0,
            // 分类等级，默认要添加的是1级分类
            'cat_level':0,
        },
        // 添加分类的表单验证规则对象
        addcateinforules:{
              cat_name:[
                  {required:true,message:'请输入分类名称',trigger:'blur'},
                  { min:1,max:12,message:'长度1-12个字节', trigger: 'blur' }
              ],
        },
        // 编辑分类的表单验证规则对象
        setcateinforules:{
              cat_name:[
                  {required:true,message:'请输入分类名称',trigger:'blur'},
                  { min:1,max:12,message:'长度1-12个字节', trigger: 'blur' }
              ],
        },
        // 父级分类列表
        parentlist:[],

        // 指定级联选择器的配置对象
        // casederprops:{
            // 指定的值
            value:'cat_id',
            // 看到的值
            label:'cat_name',
            // 父子嵌套使用哪个属性
            children:'children',
        // },
        // 选中的父级分类id数组
        selectkeys:[],
        // 编辑分类弹出框显示隐藏
        setcatedialogVisible:false,
        // 根据id获取当前编辑的分类信息对象：
        setforminfo:{
            cat_id:'',
            cat_name:''
        }
      }
  },
  methods:{
      // 获取商品分类数据
      async getcatelist(){
          const {data:res}=await this.$axios.get('/categories',{params:this.queryinfo})
          if(res.meta.status!==200) return this.$message.error('获取商品分类失败')
        //   this.$message.success('获取商品分类成功')

        //   将商品分类数据列表赋值给catelist数组中
          this.catelist=res.data.result
        //   总数据条数赋值
          this.total=res.data.total
        //   console.log(res)
      },
    //   监听pagesize的改变,每页显示的个数
      handleSizeChange(newsize){
        //   将新的值赋值给
          this.queryinfo.pagesize=newsize
        //   并且立即重新获取数据
          this.getcatelist()
      },
    //   监听pagenum的改变，当前显示的是第几页
      handleCurrentChange(newnum){
        //   将新的值赋值给
          this.queryinfo.pagenum=newnum
        //   并且立即重新获取数据
          this.getcatelist()
      },
    //   点击按钮，展示添加分类对话框
    addcate(){
        // 先获取父级分类数据
        this.getparentcatelist()
        // 在展示出对话框
        this.addcatedialogVisible=true
    },
    // 获取父级分类数据列表
    async getparentcatelist(){
        const {data:res}=await this.$axios.get('/categories',{params:{type:2}})
        if(res.meta.status!==200) return this.$message.error('获取父级分类列表失败')
        // 将获取到的父级分类数据赋值到数组中
        this.parentlist=res.data
    },
    // 添加分类的级联发生改变时，触发
    parenthandleChange(){
        // 如果 this.selectkeys 数组中的 length 大于0 ，证明选中了父级分类
        // 反之，说明没有选中任何父级分类
        if(this.selectkeys.length>0){
            // 为当前父级分类的id赋值
            this.addcateinfo.cat_pid=this.selectkeys[this.selectkeys.length-1]

            // 为当前分类的等级赋值
            this.addcateinfo.cat_level=this.selectkeys.length
            // this.$refs.addcateinforef.visibleChange()
        }else{
            // 父级分类的id
            this.addcateinfo.cat_pid=0

            // 为当前分类的等级赋值
            this.addcateinfo.cat_level=0     
        }
    },
    // 点击按钮，添加新的分类
    addcates(){
        this.$refs.addcateinforef.validate(valid=>{
            if(!valid) return
            this.$axios.post('/categories',this.addcateinfo).then(res=>{
                if(res.data.meta.status!==201) return this.$message.error('添加分类失败')
                this.$message.success('添加分类成功')
                this.getcatelist()
                this.addcatedialogVisible=false
            })
        })
    },
    // 监听 添加分类的关闭事件，重置表单
    addcateclose(){
        // 这里只是清空了第一个输入框的内容，级联的还在，需要另外除里
        this.$refs.addcateinforef.resetFields()
        // 将当前选中的父级的id数组清空
        this.selectkeys=[]
        // 将添加分类的表单数据清空
        this.addcateinfo.cat_level=0
        this.addcateinfo.cat_pid=0
    },
    // 点击按钮，展示编辑商品分类弹出框
    async setcateinfo(row){
        const {data:res}=await this.$axios.get('/categories/'+row.cat_id)
        if(res.meta.status!==200) return this.$message.error('查询分类失败')
        this.setforminfo.cat_id=res.data.cat_id
        this.setforminfo.cat_name=res.data.cat_name
        this.setcatedialogVisible=true
    },
    // 监控编辑分类的关闭事件，重置表单
    setcateclose(){
        this.$refs.setcateinforef.resetFields()
    },
    // 点击提交按钮，编辑商品分类
    setcates(){
        this.$refs.setcateinforef.validate(valid=>{
            if(!valid) return
            this.$axios.put('/categories/'+this.setforminfo.cat_id,{cat_name:this.setforminfo.cat_name}).then(res=>{
                if(res.data.meta.status!==200) return this.$message.error('编辑分类失败')
                this.$message.success('编辑分类成功')
                this.getcatelist()
                this.setcatedialogVisible=false
            })
        })
    },
    // 点击删除商品分类按钮，弹出提示框
    deletecateinfo(row){
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$axios.delete('/categories/'+row.cat_id).then(res=>{
                if(res.data.meta.status!==200) return this.$message.error('删除分类失败')

                this.$message.success('删除分类成功')
                this.getcatelist()
            })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created(){
      this.getcatelist()
  }
}
</script>

<style lang="less" scoped>
.el-icon-success{
    color:lightgreen
}
.el-icon-error{
    color:red
}
.el-row{
    margin-bottom: 15px;
}
.el-cascader{
    width: 100%;
}
</style>
